import React, {Component} from 'react';
import cs from 'classnames'
import BaseCmpt from '../BaseCmpt';
import './index.css';

class MTitle extends BaseCmpt {

    static defaultProps = {
        data: {
            type: 9,
            style: {
                paddingLeft: '10px',
                backgroundColor: '#fff',
                lineHeight: '40px',
                color: '#000',
                fontSize: '14px',
            },
            markStyle: {
                backgroundColor: '#000'
            },
            textStyle: {
                textAlign: 'left'
            },
            dataset: {
                text: '标题文字'
            }
        }
    };

    constructor(props) {
        super(props);
    }

    render() {
        var {onSelected, selected, data} = this.props;
        var {style, markStyle, textStyle, dataset} = data;
        var {hasMark = '1', text = ''} = dataset;

        return (
            <div
                onClick={(e) => {
                    onSelected && onSelected(e)
                }}
                className={cs({'mTitle cmptEle': true, 'cmptEle_selected': selected, 'mTitle_nomark': hasMark == '0'})}
                style={style}
            >
                <span className="mTitle__inner">
                    {
                        hasMark != '0' ?
                            <span className="mTitle__mark" style={markStyle}></span>
                            : null
                    }
                    <span className="mTitle__text" style={textStyle}>{text}</span>
                </span>
            </div>
        );
    }
}

export default MTitle;
